const list = document.querySelector('.top');
axios.defaults.baseURL = 'http://ajax-api.itheima.net'
axios.get('/api/category/top').then(({ data: res }) => {
const axiosArr=  res.data.map(item => {
     return    axios.get('/api/category/sub?id='+item.id)
})
     return  Promise.all(axiosArr)
}).then((res) => {
  const html = res.map(({ data: item }) => {
   
    return `  <li>
    <a href="javascript:;">${item.data.name}</a>
    <ul class="sub">
       ${
      item.data.children.map(item => {
        return ` <li>
        <a href="javascript:;">
          <span>${item.name}</span>
          <img src=${item.picture} alt="">
        </a>
      </li>
             `
          }).join('')
       }
    </ul>
  </li>
       `
  }).join('')
  list.innerHTML =html
 })
